<template>
  <div class="api-test">
    <h2>API测试页面</h2>
    
    <div class="test-section">
      <h3>主机状态API测试</h3>
      <button @click="testHostStatusAPI" :disabled="loading">
        {{ loading ? '测试中...' : '测试主机状态API' }}
      </button>
      
      <div v-if="result" class="result">
        <h4>测试结果:</h4>
        <pre>{{ JSON.stringify(result, null, 2) }}</pre>
      </div>
      
      <div v-if="error" class="error">
        <h4>错误信息:</h4>
        <pre>{{ JSON.stringify(error, null, 2) }}</pre>
      </div>
    </div>
    
    <div class="test-section">
      <h3>直接HTTP测试</h3>
      <button @click="testDirectHTTP" :disabled="loading2">
        {{ loading2 ? '测试中...' : '直接HTTP请求测试' }}
      </button>
      
      <div v-if="result2" class="result">
        <h4>直接HTTP结果:</h4>
        <pre>{{ JSON.stringify(result2, null, 2) }}</pre>
      </div>
      
      <div v-if="error2" class="error">
        <h4>直接HTTP错误:</h4>
        <pre>{{ JSON.stringify(error2, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { monitoringApi } from '@/api/monitoring'
import axios from 'axios'

const loading = ref(false)
const loading2 = ref(false)
const result = ref(null)
const result2 = ref(null)
const error = ref(null)
const error2 = ref(null)

const testHostStatusAPI = async () => {
  loading.value = true
  result.value = null
  error.value = null
  
  try {
    console.log('开始测试主机状态API...')
    const response = await monitoringApi.getHostStatus()
    console.log('API响应:', response)
    result.value = response.data
  } catch (err: any) {
    console.error('API测试失败:', err)
    error.value = {
      message: err.message,
      status: err.response?.status,
      statusText: err.response?.statusText,
      data: err.response?.data,
      config: {
        url: err.config?.url,
        method: err.config?.method,
        headers: err.config?.headers
      }
    }
  } finally {
    loading.value = false
  }
}

const testDirectHTTP = async () => {
  loading2.value = true
  result2.value = null
  error2.value = null
  
  try {
    console.log('开始直接HTTP测试...')
    
    // 获取token
    const token = localStorage.getItem('token')
    console.log('使用Token:', token)
    
    // 直接请求
    const response = await axios.get('/api/monitoring/dashboard/host-status/', {
      headers: {
        'Authorization': `Token ${token}`,
        'Content-Type': 'application/json'
      }
    })
    
    console.log('直接HTTP响应:', response)
    result2.value = response.data
  } catch (err: any) {
    console.error('直接HTTP测试失败:', err)
    error2.value = {
      message: err.message,
      status: err.response?.status,
      statusText: err.response?.statusText,
      data: err.response?.data,
      url: err.config?.url,
      method: err.config?.method
    }
  } finally {
    loading2.value = false
  }
}
</script>

<style scoped>
.api-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-section h3 {
  margin-top: 0;
  color: #333;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background: #0056b3;
}

.result {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.error {
  margin-top: 20px;
  padding: 15px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  color: #721c24;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  max-height: 400px;
  overflow-y: auto;
}

h4 {
  margin-top: 0;
  margin-bottom: 10px;
}
</style>
